<template>
  <view class="bottomBody jh-flex-center">
    <image class="serviceBtn2" :src="ossDomain+'/consultative.png'" @tap='showPopup'></image>
    <cover-image class="serviceBtn1" :src="ossDomain+'/call-service.png'" @tap='showPopup'></cover-image>
    <cover-view v-if="popup" class="mask" :style="{width: sysInfo.screenWidth + 'px',height: sysInfo.screenHeight + 'px'}" catchtouchmove='return' @click.stop="closePopup">
      <cover-view class="popup" :style="{width: sysInfo.screenWidth + 'px'}" @click.stop.prevent='stop'>
        <cover-view class="popup-item1 c-b-fff jh-row jh-flex-center" :style="{width: sysInfo.screenWidth + 'px'}">
          <cover-view class="jh-column jh-flex-center" @touchstart="touchstart('audioTap')" @touchend="touchend('audioTap')">
            <cover-image @touchstart="touchstart('audioTap')" @touchend="touchend('audioTap')" :src="ossDomain + '/icon-audio'+(audioTap ? '-a' : '')+'.png'" style="width: 36px;height: 36px;"></cover-image>
            <jh-text value="语音通话" size="11" :color="audioTap ? '#008399' : '#333'" type="Bold" @touchstart="touchstart('audioTap')" @touchend="touchend('audioTap')"></jh-text>
          </cover-view>
          <cover-view class="jh-column jh-flex-center" style="margin-left: 68px;" @touchstart="touchstart('videoTap')" @touchend="touchend('videoTap')">
            <cover-image @touchstart="touchstart('videoTap')" @touchend="touchend('videoTap')" :src="ossDomain + '/icon-video'+(videoTap ? '-a' : '')+'.png'" style="width: 36px;height: 36px;"></cover-image>
            <jh-text value="视频通话" size="11" :color="videoTap ? '#008399' : '#333'" type="Bold" @touchstart="touchstart('videoTap')" @touchend="touchend('videoTap')"></jh-text>
          </cover-view>
        </cover-view>
        <cover-view class="popup-item2 c-b-fff jh-flex-center" :style="{width: sysInfo.screenWidth + 'px', height: '48px'}" @click="popup = false">
          <jh-text value="取消" size="14" color="#333" type="Bold"></jh-text>
        </cover-view>
      </cover-view>
    </cover-view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    props: {
      type: {
        type: String | Number,
        default: 0
      }
    },
    computed: {
      ...mapState({
        sysInfo: state => state.global.systemInfo,
      }),
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        clickStatus: false,
        interval: true,
        timeout: null,
        popup: false,
        audioTap: false,
        videoTap: false
      };
    },
    watch: {
      sysInfo(e) {
        this.init()
      },
    },
    mounted() {
      // this.init()
    },
    methods: {
      stop () {
        this.clickStatus = true
        return this.timeout = setTimeout(()=>{
          this.clickStatus = false
        },500)
      },
      touchstart (e) {
        this[e] = true
      },
      touchend (e) {
        setTimeout(()=>{
          this[e] = false
          if (e == 'audioTap') {
            this.callService(1)
          }
          if (e == 'videoTap') {
            this.callService(2)
          }
        },100)
      },
      showPopup () {
        this.popup = true
      },
      closePopup () {
        if (this.clickStatus) return
        this.popup = false
      },
      callService(tapIndex) {
        if (this.interval) {
          this.interval = false
          let type = this.type - 0
          setTimeout(() => {
            this.interval = true
          }, 500)
          return
          uni.$http.getStaff({
            type
          }).then(res => {
            let to = res.data.tencent_user_id
            uni.$emit("call", {
              type: 1,
              user: to,
              calltype: tapIndex, // 1.语音， 2.视频
            });
            setTimeout(() => {
              this.interval = true
            }, 500)
          }, err => {
            this.interval = true
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/common/base.scss"; // 快速开发样式

  .bottomBody {
    height: 50px;
  }

  .serviceBtn2 {
    width: 73px;
    height: 27px;
  }

  .serviceBtn1 {
    width: 35px;
    height: 35px;
    position: fixed;
    z-index: 999;
    bottom: 60px;
    right: 30pxpx;
  }
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: .3);
  }
  .popup{
    position: absolute;
    left: 0;
    bottom: 0;
    &-item1{
      height: 90px;
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
    }
    &-item2{
      border-top: 10px solid #eee;
    }
  }
</style>
